Vue3.0的新特性 (9) data、mixin和filter |
您所在的位置：网站首页 › vue3 mixin使用 › Vue3.0的新特性 (9) data、mixin和filter |
Vue3.0的新特性 (9) data、mixin和filter
|
在Vue2.x中，我们可以定义data为object或者function，但是我们知道在组件中如果data是object的话会出现数据互相影响，因为object是引用数据类型； 在Vue3中，data只接受function类型，通过function返回对象；同时Mixin的合并行为也发生了改变，当mixin和基类中data合并时，会执行浅拷贝合并： const Mixin = { data() { return { user: { name: 'Jack', id: 1, address: { prov: 2, city: 3, }, } } } } const Component = { mixins: [Mixin], data() { return { user: { id: 2, address: { prov: 4, }, } } } } // vue2结果： { id: 2, name: 'Jack', address: { prov: 4, city: 3 } } // vue3结果： user: { id: 2, address: { prov: 4, }, }我们看到最后合并的结果，vue2.x会进行深拷贝，对data中的数据向下深入合并拷贝；而vue3只进行浅层拷贝，对data中数据发现已存在就不合并拷贝。 在vue2.x中，我们还可以通过过滤器filter来处理一些文本内容的展示： {{ status | statusText }} export default { props: { status: { type: Number, default: 1 } }, filters: { statusText(value){ if(value === 1){ return '订单未下单' } else if(value === 2){ return '订单待支付' } else if(value === 3){ return '订单已完成' } } } }最常见的就是处理一些订单的文案展示等；然而在vue3中，过滤器filter已经删除，不再支持了，官方建议使用方法调用或者计算属性computed来进行代替。 写在最后的话，如果文章对您有帮助请点下赞，收藏下防止忘记可以回看 |
【本文地址】
今日新闻 |
推荐新闻 |